<template>
  <div ref="dom" class="charts chart-bar" style="width:100%;height:100%"></div>
</template>
<script>
import echarts from 'echarts'
import tdTheme from './theme.json'
import {off, on} from '@/libs/tools'

echarts.registerTheme('tdTheme', tdTheme)
export default {
  name: 'ChartBar',
  props: {
    value: Object,
    colorA: Array
  },
  data() {
    return {
      dom: null
    }
  },
  methods: {
    resize() {
      this.dom.resize()
    }
  },
  mounted() {
    this.$nextTick(() => {
      let _this = this;
      let xAxisData = Object.keys(this.value)
      let seriesData = Object.values(this.value)
      let option = {
        color: ['#febf1a'],
        title: {
          x: 'center'
        },
        grid: {

          top: 10,
          bottom: 20
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: false
          }
        },
        series: [{
          name: '年龄阶段',
          type: 'pictorialBar',
          barCategoryGap: '0%',
          symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
          label: {
            show: true,
            position: 'top',
            distance: 15,
            color: '#2D8CF0',
            fontWeight: 'bolder',
            fontSize: 20
          },
          itemStyle: {
            normal: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                // 45, 140, 240  #2D8CF0   OTAS蓝
                // 232, 94, 106  #DB5E6A   暗红
                colorStops: [{
                  offset: 0,
                  color: 'rgba(45, 140, 240, .8)' //  0%  处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(45, 140, 240, .1)' //  100%  处的颜色
                }],
                global: false //  缺省为  false
              }
            },
            emphasis: {
              opacity: 1
            }
          },
          data: seriesData,
          z: 10
        }]
      }
      if (this.colorA && this.colorA.length) {
        option.series[0].itemStyle = {
          normal: {
            color: function (params) {
              let colorList = _this.colorA;
              return colorList[params.dataIndex]
            }
          }
        }
      }
      this.dom = echarts.init(this.$refs.dom, 'tdTheme')
      this.dom.setOption(option)
      on(window, 'resize', this.resize)
    })
  },
  beforeDestroy() {
    off(window, 'resize', this.resize)
  }
}
</script>
